<template>
    <!-- 商品组 -->
    <view class="diy-sharingGoods" :style="'background: ' + itemStyle.background + ';'">
        <view class="goods-item" v-for="(dataItem, index) in dataList" :key="index">
            <form @submit="_onTargetGoods">
                <button formType="submit" class="btn-normal dis-flex" :data-id="dataItem.active_id">
                    <!-- 商品图片 -->
                    <view class="goods-item_left">
                        <image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
                    </view>
                    <view class="goods-item_right">
                        <!-- 商品名称 -->
                        <view class="goods-item_title twolist-hidden">
                            <text>{{ dataItem.goods_name }}</text>
                        </view>
                        <view class="goods-item_desc">
                            <!-- 商品卖点 -->
                            <view v-if="itemStyle.show.selling_point" class="desc-selling_point onelist-hidden">
                                <text>{{ dataItem.selling_point }}</text>
                            </view>
                            <!-- 拼团信息 -->
                            <view class="desc-situation">
                                <text class="col-9">已有{{ dataItem.booking_count }}人预约成功</text>
                            </view>
                            <!-- 商品价格 -->
                            <view class="desc_footer">
                                <block>
                                    <text class="price_x" v-if="0 < dataItem.goods_price">¥{{ dataItem.goods_price }}</text>
                                    <text class="price_x" v-else>免费</text>
                                </block>
                                <text class="price_y col-9" v-if="itemStyle.show.originalPrice">¥{{ dataItem.original_price }}</text>
                            </view>
                        </view>
                        <view class="btn-settlement">去预约</view>
                    </view>
                </button>
            </form>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                active_id: '',
                goods_image: '',
                goods_name: '',
                selling_point: '',
                booking_count: '',
                goods_price: 0,
                original_price: ''
            }
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转商品详情页
         */
        _onTargetGoods(e) {
            // 记录formid
            app.saveFormId(e.detail.formId);
            uni.navigateTo({
                url: '/pages/booking/goods/index?active_id=' + e.detail.target.dataset.id
            });
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */
/* @import "../../../utils/common.scss"; */

/* 商品组 */

.diy-sharingGoods {
    padding: 20rpx;
}

.goods-item {
    height: 320rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #fff;
}

.goods-item:last-child {
    margin-bottom: 0;
}

/* 商品图片 */

.goods-item_left {
    display: flex;
    width: 40%;
    background: #fff;
    align-items: center;
}

.goods-item_left .image {
    display: block;
    width: 240rpx;
    height: 240rpx;
}

.goods-item_right {
    position: relative;
    width: 60%;
}

/* 商品名称 */

.goods-item_right .goods-item_title {
    height: 72rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    line-height: 1.3;
    color: $uni-text-color;
}

.goods-item_desc {
    margin-top: 16rpx;
}

/* 商品卖点 */

.desc-selling_point {
    width: 400rpx;
    /* height: 40rpx; */
    font-size: 24rpx;
    line-height: 1.4;
    color: #ff495e;
}

/* 拼团信息 */

.desc-situation {
    margin-top: 12rpx;
    font-size: 24rpx;
    line-height: 1.3;
    color: rgb(240, 60, 60);
}

.desc-situation .people {
    margin: 0 12rpx;
}

/* 商品价格 */

.desc_footer {
    margin-top: 12rpx;
    font-size: 24rpx;
}

.desc_footer .price_x {
    margin-right: 16rpx;
    color: rgb(240, 60, 60);
    font-size: 28rpx;
}

.desc_footer .price_y {
    text-decoration: line-through;
}

/* 去拼团按钮 */

.goods-item .btn-settlement {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 28rpx;
    border-radius: 40rpx;
    background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
    box-shadow: 0 4rpx 20rpx -4rpx rgb(235, 53, 107);
    font-size: 28rpx;
    line-height: 54rpx;
    text-align: center;
    color: $uni-text-color-inverse;
}
</style>
